<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>
    <div>
      <el-card style="height: 200px; width: 500px; margin-left: 400px; background-color: lightgoldenrodyellow">
        <div slot="header" class="clearfix">
          <span>地址信息</span>
          <el-button style="float: right; padding: 3px 0;" type="text" @click="handleEdit(address.id)">编辑</el-button>
        </div>
        <div>收货地址: {{address.address}}</div><br>
        <div>收货人: {{address.receiveName}}</div><br>
        <div>联系电话: {{address.phone}}</div><br>
      </el-card>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form label-width="80px">
          <el-form-item label="收货地址">
            <el-input v-model="pojo.address"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="pojo.phone"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input v-model="pojo.receiveName"></el-input>
          </el-form-item>
          <el-button type="primary" @click="handleSave()">保存</el-button>
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </el-form>
      </el-dialog>
    </div>
    <Footer></Footer>
  </div>

</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import addressApi from '@/api/address'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        dialogFormVisible: false, // 编辑窗口是否可见
        pojo: {}, // 编辑表单绑定的实体对象
        address: {} // 当前用户修改的ID
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        addressApi.getUserAddress().then(response => {
          this.address = response.data
        })
      },
      handleSave() {
        addressApi.updateUserAddress(this.pojo).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.fetchData() // 刷新列表
          }
        })
        this.dialogFormVisible = false // 关闭窗口
      },
      handleEdit(id) {
        this.id = id
        this.dialogFormVisible = true // 打开窗口
        this.pojo.id = this.address.id
        this.pojo.address = this.address.address
        this.pojo.receiveName = this.address.receiveName
        this.pojo.phone = this.address.phone
      }
    }
  }
</script>

<style scoped>

</style>
